<style scoped lang="scss">
.div1 {
    display: flex;
    justify-content: space-between;
    .search1 {
        flex: 1;
    }
    .icon1 {
        font-size: 30px;
        margin: 10px;
    }
}

.content {
    display: flex;

    .content-left,
    .content-right {
        width: 50%;
        height: 180px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
.dl1{
    display: flex;
    dt{
        img{
            padding: 20px;
            width: 180px;
        }
    }
    dd{
        padding:  20px 0;
        p{
            display: flex;
            justify-content: space-between;
            span{
                font-size: 12px;
            }
        }
    }
}
.p1{
    margin-top: 10px;
    display: flex;
    img{
        width: 33.3%;
        padding: 2px;
    }
}
.p2{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    padding-top: 30px;
}
</style>
<template>
    <div>
        <div class="div1">
            <van-icon class="icon1" name="manager" @click="onicon1" />
            <van-search class="search1" shape="round" background="#fff" placeholder="请输入搜索关键词" @click="onsearch" />
            <el-icon class="icon1" @click="onicon2"><Bell /></el-icon>
        </div>
        <main>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in bannerData" :key="index">
                    <img style="width: 100%;height: 150px;" :src="item.imageUrl" alt="">
                </van-swipe-item>
                <!-- <van-swipe-item>
                    <img style="width: 100%;height: 150px;" src="../../images/bg.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img style="width: 100%;height: 150px;" src="../../images/bg099.jpg" alt="">
                </van-swipe-item> -->
            </van-swipe>
            <div style="width: 100%;height: 30px;border: 1px solid #ccc;line-height: 30px;">
                <span style="margin-left: 10px;">知识宝典</span>
                <hr>
            </div>
            <div class="content">
                <div class="content-left">
                    <span style="margin-left: 5px;">常见病症</span>
                    <img @click="onimg1" src="../../images/content-left.png" alt="">
                </div>
                <div class="content-right">
                    <span style="margin-left: 5px;">常用药品</span>
                    <img @click="onimg1" src="../../images/content-right.png" alt="">
                </div>
            </div>
            <div style="width: 100%;height: 30px;border: 1px solid #ccc;line-height: 30px;">
                <span style="margin-left: 10px;">问诊咨询</span>
                <hr>
            </div>
            <van-grid :column-num="4">
                <van-grid-item
                    icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"
                    text="内科" />
                <van-grid-item
                    icon="https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png"
                    text="眼科" />
                <van-grid-item
                    icon="https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png"
                    text="骨科" />
                <van-grid-item
                    icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
                    text="小儿科" />
                <van-grid-item
                    icon="https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png"
                    text="传染病科" />
                <van-grid-item
                    icon="https://m.360buyimg.com/babel/jfs/t20270715/22456/27/20943/10381/6694ee81F684396bb/0ba51f592d28dfdd.png"
                    text="皮肤性病" />
                <van-grid-item
                    icon="https://img11.360buyimg.com/babel/jfs/t20270715/29760/28/21267/11992/6694eea3F0fe3dca2/d5672661722bfc42.png"
                    text="耳鼻喉科" />
                <van-grid-item
                    icon="https://img10.360buyimg.com/babel/jfs/t20270715/233990/3/23983/8102/6694eec4F2aad82cf/2144631769da49b9.png"
                    text="精神病科" />
            </van-grid>
            <div style="width: 100%;height: 30px;border: 1px solid #ccc;line-height: 30px;">
                <span style="margin-left: 10px;">健康测评</span>
                <hr>
            </div>
            <div>
                <img style="width: 100%;height: 150px;" src="../../images//1.png" alt="">
            </div>
            <div style="width: 100%;height: 30px;border: 1px solid #ccc;line-height: 30px;">
                <span style="margin-left: 10px;">健康资讯</span>
                <hr>
            </div>
            <div style="width: 100%;height: 30px;border: 1px solid #ccc;line-height: 30px;justify-content: space-around;display: flex;font-size: 15px">
                <span>健康资讯</span>
                <span>医学动态</span>
                <span>医疗动态</span>
                <span>养生美容</span>
                <span>健身减肥</span>
            </div>
            <div>
                <dl class="dl1">
                    <dt>
                        <img src="../../images/2.png" alt="">
                    </dt>
                    <dd>
                        <span>女性朋友都注意啦！营养专家：如果不想失眠，请远离6种吃法！</span>
                        <p>
                            <span>范志红注册营养师</span>
                            <span>10分钟前</span>
                        </p>
                    </dd>
                </dl>
            </div>
            <div>
                <hr>
                <span style="padding: 10px;">早上起来第一杯水喝什么？</span>
                <p class="p1">
                    <img src="../../images/shui1.png" alt="">
                    <img src="../../images/shui2.png" alt="">
                    <img src="../../images/shui3.png" alt="">
                </p>
                <p class="p2">
                    <span>慎独白衣</span>
                    <span>23小时前</span>
                </p>
                <hr>
            </div>
            <div>
                <dl class="dl1">
                    <dt>
                        <img src="../../images/3.png" alt="">
                    </dt>
                    <dd>
                        <span>吃坚果等于“喝油”，减肥期间不能吃！吓唬谁呢？</span>
                        <p style="margin-top: 30px;">
                            <span>钱多多</span>
                            <span>1天前</span>
                        </p>
                    </dd>
                </dl>
                <hr>
            </div>
            <div style="width: 100%;height: 70px;border: 1px solid #ccc;">
                <span style="margin-left: 10px;">哪种油对身体有益？怎么吃最健康？</span>
                <p class="p3" style="margin: 20px 10px;font-size: 12px;display: flex;justify-content: space-between;">
                    <span>心内科喵医生</span>
                    <span>一周前</span>
                </p>
            </div>
            <div>
                <dl class="dl1">
                    <dt>
                        <img src="../../images/4.png" alt="">
                    </dt>
                    <dd>
                        <span>心烦、失眠、上火...4杯暖心茶，补气清热更轻松！</span>
                        <p style="margin-top: 20px;">
                            <span>北京卫视我的大医生</span>
                            <span>2018-12-10</span>
                        </p>
                    </dd>
                </dl>
                <span style="display: flex;justify-content: end;padding: 10px 20px;" @click="oncha">查看更多</span>
                <hr>
            </div>
        </main>
    </div>
</template>
<script setup lang="ts">
import { request } from '@/axios/request';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const bannerData = ref()
const getBanner = async () => {
    const res = await request('/api/health/share/v1/bannersShow')
    const { result } = res.data
    bannerData.value = result
    console.log(bannerData._rawValue);
}
getBanner()
const router = useRouter()
const onimg1=()=>{
    router.push('/disease')
}
const onimg2=()=>{
    router.push('/medicine')
}
const onicon1=()=>{
    router.push('/my')
}
const onicon2=()=>{
    router.push('/information')
}
const onsearch=()=>{
    router.push('/homeSearch')
}
const oncha=()=>{
    router.push('/more')
}
</script>